<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    switchFullscreen
    @ok="submitForm"
    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
    @cancel="close"
    cancelText="关闭">
    <a-spin :spinning="confirmLoading">
      <a-card title="基础设置" :bordered="false">
        <a-col :span="24">
          <a-col :span="2">
            昵称：
          </a-col>
          <a-col :span="12">
            <a-input v-model="model.nickname" placeholder="请输入昵称"></a-input>
          </a-col>
        </a-col>
        <a-col :span="24" style="margin-top: 10px">
          <a-col :span="2">
            交友宣言：
          </a-col>
          <a-col :span="12">
            <a-textarea v-model="model.makeFriendsDetail" placeholder="请输入交友宣言"></a-textarea>
          </a-col>
        </a-col>
      </a-card>
        <a-card title="头像" :bordered="false">
          <j-image-upload bizPath="appfile/userHead" v-model="model.avatar"></j-image-upload>
        </a-card>
        <a-card title="相册" :bordered="false">
          <a-button slot="extra" type="primary" @click="openImgUpload">上传</a-button>
          <a-table :scroll="{x:true}" size="middle" ref="table" rowKey="imageUrl" :pagination="false" :columns="columns" :data-source="model.userPhotoList">
            <template slot="coverSlot" slot-scope="text,record">
              <span>
                <a-switch v-model="record.cover" @change="coverChange(record.id,$event)"/>
              </span>
            </template>
            <template slot="imgSlot" slot-scope="text,record">
              <img :src="text" preview="img1" height="40px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
            </template>
            <template slot="buttonAction" slot-scope="text, record">
<!--              <a-button type="primary" @click="openImg(record.imageUrl)">预览</a-button>-->
              <a-popconfirm style="height: 100%" title="确定删除吗?" @confirm="() => delPhoto(record.id)">
                <a>删除</a>
              </a-popconfirm>
            </template>
          </a-table>

        </a-card>
        <a-card title="个性标签" :bordered="false">
          <j-multi-select-tag
            v-model="model.impressionLabels"
            :options="model.impCheckOptions"
            placeholder="请做出你的选择"
            @change="impressionChange"
            type="checkbox">
          </j-multi-select-tag>
        </a-card>
        <a-card title="喜欢什么样的朋友" :bordered="false">
          <j-multi-select-tag
            v-model="model.loveFriendLabels"
            :options="model.loveCheckOptions"
            placeholder="请做出你的选择"
            @change="loveFriendChange"
            type="checkbox">
          </j-multi-select-tag>
        </a-card>
    </a-spin>
    <!-- 图片上传 -->
    <a-modal v-model="imgVisible" title="图片上传" :width="800" @cancel="imgClose" @ok="imgUpload" destroyOnClose="true">
      <j-image-upload bizPath="appfile/photo" isMultiple v-model="model.photo"></j-image-upload>
    </a-modal>
  </j-modal>
</template>

<script>
import { postAction,getAction } from '@/api/manage'
import { duplicateCheck } from '@/api/api'
export default {
  name: 'UpdateUserInfo',
  data () {
    var coverSlot = 'imgSlot'
    return {
      title:'修改个人资料',
      width:1200,
      visible: false,
      disableSubmit: false,
      model:{
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 0 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      validatorRules: {
        avatar: [
          { required: true, message: '请选择头像!'}
        ],
        sex: [
          { required: true, message: '请选择性别!'},
        ],
      },

      imgVisible:false,
      userId:"",

      columns: [
        {
          title: '#',
          dataIndex: '',
          key:'rowIndex',
          width:60,
          align:"center",
          customRender:function (t,r,index) {
            return parseInt(index)+1;
          }
        },
        {
          title:'图片',
          align:"center",
          dataIndex: 'imageUrl',
          scopedSlots: { customRender: 'imgSlot' }
        },
        {
          title:'设为主封面',
          align:"center",
          width:200,
          dataIndex: 'isCover',
          scopedSlots: { customRender:'coverSlot' }
        },
        {
          title: '操作',
          dataIndex: 'action',
          align:"center",
          width:150,
          scopedSlots: { customRender: 'buttonAction' }
        }]
    }
  },
  methods: {
    //打开
    open (userId) {
      this.visible=true
      this.userId=userId;
      this.getUserWebInfo(userId);
    },
    //关闭
    close () {
      this.visible = false;
    },

    //打开图片上传
    openImgUpload(){
      this.imgVisible=true;
    },
    //关闭图片上传
    imgClose(){
      this.imgVisible=false;
    },

    //图片上传
    imgUpload(){
      var photo=this.model.photo;
      if(photo){
        var list=photo.split(",");
        //加入到图片list中
        for(var i=0;i<list.length;i++){
          var id=Math.floor(Math.random() * 100000);
          var item={};
          item.id=id;
          item.isCover="0";
          item.cover=false;
          item.imageUrl=list[i];
          if(this.model.userPhotoList.length>=9){
            this.$message.warning("最多只能有9张相册");
            this.imgClose();
            this.model.photo="";
            return;
          }else{
            this.model.userPhotoList.push(item);
          }

        }
      }
      this.imgClose();
    },

    //提交
    submitForm () {
      const that = this;
      that.confirmLoading = true;
      var obj={};
      obj.userId=this.userId;
      obj.avatar=this.model.avatar;
      obj.impressionLabels=this.model.impressionLabels;
      obj.loveFriendLabels=this.model.loveFriendLabels;
      obj.nickname=this.model.nickname;
      obj.makeFriendsDetail=this.model.makeFriendsDetail;
      //相册列表
      obj.photoList=this.model.userPhotoList.map(item => item.imageUrl).join(',');
      //封面
      const foundItem = this.model.userPhotoList.find(item => item.isCover === 1);
      if(foundItem){
        obj.coverUrl=foundItem.imageUrl;
      }
      postAction("/user/userDetail/webUpdateUser",obj).then((res)=>{
        if(res.success){
          that.$message.success(res.message);
          that.$emit('ok');
          that.close();
        }else{
          that.$message.warning(res.message);
        }
      }).finally(() => {
        that.confirmLoading = false;
      })
    },

    //获取用户信息
    getUserWebInfo(userId){
      var that=this;
      getAction("/user/userDetail/getUserWebInfo",{userId:userId}).then((res)=>{
        if(res.success){
          this.model=res.result;
          //格式化标签数据
          //印象标签
          var impressionList = res.result.impressionList
          this.model.impNum= impressionList.maxSelectNum;
          var impLabelList = impressionList.labelList;
          var impCheckOptions = [];
          for(var i=0;i<impLabelList.length;i++){
            impCheckOptions.push({
              label:impLabelList[i],
              value:impLabelList[i]
            })
          }
          this.model.impCheckOptions=impCheckOptions;

          //喜欢的朋友标签
          var loveFriendList = res.result.loveFriendList;
          this.model.loveNum= loveFriendList.maxSelectNum;
          var loveFriendList = loveFriendList.labelList;
          var loveCheckOptions = [];
          for(var i=0;i<loveFriendList.length;i++){
            loveCheckOptions.push({
              label:loveFriendList[i],
              value:loveFriendList[i]
            })
          }
          this.model.loveCheckOptions=loveCheckOptions;

          //初始化封面图
          var userPhotoList = res.result.userPhotoList;
          for (var i=0;i<userPhotoList.length;i++) {
            if(userPhotoList[i].isCover=='1'){
              userPhotoList[i].cover=true;
            }else{
              userPhotoList[i].cover=false;
            }
          }


        }else{
          that.$message.warning(res.message);
        }
      }).finally(() => {
        that.confirmLoading = false;
      })
    },

    //个性标签更新事件
    impressionChange(values){
      var length=0;
      if(values){
        length=values.split(",").length;
      }
      if(length>this.model.impNum){
        this.$message.warning("最多选择"+this.model.impNum+"个标签");
        this.model.impressionLabels = values.split(",").slice(0,this.model.impNum).join(",");
      }
    },

    //我喜欢的朋友更新事件
    loveFriendChange(values){
      var length=0;
      if(values){
        length=values.split(",").length;
      }
      if(length>this.model.loveNum){
        this.$message.warning("最多选择"+this.model.loveNum+"个标签");
        this.model.loveFriendLabels = values.split(",").slice(0,this.model.loveNum).join(",");
      }
    },

    //是否主页图更新
    coverChange(id,value){
      if(value){
        var userPhotoList = this.model.userPhotoList;
        for (var i=0;i<userPhotoList.length;i++){
          if(userPhotoList[i].id==id){
            userPhotoList[i].isCover=1;
            userPhotoList[i].cover=true;
          }else{
            userPhotoList[i].isCover=0;
            userPhotoList[i].cover=false;
          }
        }
      }
    },

    //删除图片
    delPhoto(id){
      this.model.userPhotoList = this.model.userPhotoList.filter(item => item.id !== id);
    },

  }
}
</script>

<style scoped>

</style>